import React, {Component} from 'react';
import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';

export default class extends Component {
    //初始值
    state = {
        phone: '',
        pwd: '',
        verifyCode: '',
        inviteCode: ''          //邀请码
    };
    submit = () => {
        const {submit} = this.props;
        const {phone, pwd, verifyCode, inviteCode} = this.state;
        submit(phone, pwd, verifyCode, inviteCode);
    };
    sendSms = () => {
        const {sendSms} = this.props;
        sendSms(this.state.phone);
    };

    render() {
        const {phone, pwd, verifyCode, inviteCode} = this.state;
        const {isCodeGetting, time} = this.props;
        let text = <Text style={styles.smsText}>发送验证码</Text>;
        if (isCodeGetting || time) {
            text = <Text style={[styles.smsText, {color: 'gray'}]}>{time || '发送验证码'}</Text>;
        }
        return (
            <View style={styles.container}>
                <View style={styles.inputWrap}>
                    <Image source={require('../../../images/auth/icon_phone.png')} style={styles.img}/>
                    <TextInput
                        returnKeyType="next"
                        clearButtonMode="always"
                        onChangeText={phone => this.setState({
                            phone: phone.trim()
                        })}
                        keyboardType="phone-pad"
                        underlineColorAndroid="transparent"
                        placeholder="请输入手机号"
                        style={styles.input}
                        value={phone}
                        maxLength={11}
                    />
                </View>
                <View style={styles.inputWrap}>
                    <Image source={require('../../../images/auth/icon_lock.png')} style={styles.img}/>
                    <TextInput
                        returnKeyType="next"
                        clearButtonMode="always"
                        onChangeText={pwd => this.setState({
                            pwd: pwd.trim()
                        })}
                        secureTextEntry={true}
                        placeholder={'请输入6-32位密码'}
                        style={styles.input}
                        value={pwd}
                        maxLength={32}
                    />
                </View>
                <View style={styles.inputWrap}>
                    <Image source={require('../../../images/auth/icon_lock.png')} style={styles.img}/>
                    <TextInput
                        returnKeyType="next"
                        clearButtonMode="always"
                        onChangeText={verifyCode => this.setState({
                            verifyCode: verifyCode.trim()
                        })}
                        keyboardType="numeric"
                        placeholder={'请输入短信验证码'}
                        style={styles.input}
                        value={verifyCode}
                        maxLength={6}
                    />
                    <TouchableOpacity onPress={this.sendSms} style={styles.smsWrap}
                                      disabled={!!(isCodeGetting || time)}>
                        {text}
                    </TouchableOpacity>
                </View>
                <View style={styles.inputWrap}>
                    <Image source={require('../../../images/auth/icon_lock.png')} style={styles.img}/>
                    <TextInput
                        returnKeyType="done"
                        clearButtonMode="always"
                        onChangeText={inviteCode => this.setState({
                            inviteCode: inviteCode.trim()
                        })}
                        underlineColorAndroid="transparent"
                        placeholder={'请输入邀请码'}
                        style={styles.input}
                        value={inviteCode}
                        maxLength={32}
                    />
                </View>
                <TouchableOpacity onPress={this.submit}>
                    <View style={styles.btnWrap}>
                        <Text style={styles.btnText}>注册</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        margin: 40,
        marginTop: 0,
        flex: 1
    },
    inputWrap: {
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        height: 32
    },
    img: {
        width: 20,
        height: 20,
        marginRight: 8
    },
    input: {
        flex: 1,
        height: 32,
        borderBottomWidth: 1,
        borderColor: '#d7d7d7',
        padding: 0
    },
    smsWrap: {
        borderWidth: 1,
        marginLeft: 6,
        width: 80
    },
    smsText: {
        height: 28,
        fontSize: 12,
        lineHeight: 28,
        textAlign: 'center',
        width: '100%',
        color: 'purple'
    },
    btnWrap: {
        backgroundColor: '#f42f19',
        borderRadius: 18,
        marginTop: 24
    },
    btnText: {
        fontSize: 15,
        width: '100%',
        height: 36,
        lineHeight: 36,
        textAlign: 'center',
        color: '#fff'
    }
});
